<template>
  <div>
    <swiper
        :modules="modules"
        autoplay
        :loop="true"
        :slides-per-view="1"
        :space-between="50"
        navigation
        :pagination="{ clickable: true }"
        class="swiper">
      <swiper-slide>
<!--        <a href="" style="background: url(../../../assets/img/banner/5.png)"></a>-->
        <img src="~assets/img/banner/5.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="~assets/img/banner/6.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="~assets/img/banner/7.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="~assets/img/banner/8.png" alt="">
      </swiper-slide>

    </swiper>
  </div>
</template>

<script>
import { Pagination,Autoplay,Navigation} from 'swiper';
import { Swiper, SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
export default {
  name: "IndexSwiper",
  setup(){
    return{
      modules:[Pagination,Autoplay,Navigation],
    }
  },
  components:{
    Swiper,SwiperSlide,
  }
}
</script>
<style scoped>
a{
  display: block;
  padding-top: 46.66666%;
}
img{
  width: 100%;
  height: 560px;
  display: inline-block;
  /*padding-top: 46.66666%;*/
  /*background-size: cover;*/
  /*background-position: center center;*/
  /*background-repeat: no-repeat;*/
}
</style>